<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../00-source/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>1<button>del</button></li>
        <li>2<button>del</button></li>
        <li>3<button>del</button></li>
        <li>4<button>del</button></li>
    </ul>

    <span>123123</span>
    <script>
        /*
            on()即可对于元素节点进行事件绑定
                第一个参数为字符串: 即事件名称, 如click、keyup
                第二个参数为标签名称(可以不写): 
                    即子代元素标签名称, 比如这个案例里就让按钮有一个删除功能
                    这个其实就是委托，我们都知道委托就是给父元素绑事件，但是子元素才是触发事件的。
                    这个参数就是把子元素指定好
                第三个参数为数据(可以不写): 这个数据可以在回调函数的event参数里通过data属性拿到.
                第四个参数为函数: 即回调函数

                注意好，第二个和第三个参数是可以没有的
        */ 
        $('ul').on('click','button',{name:'mikaisa'},function(e){
            console.log(this);
            console.log(e.data);
            this.parentNode.remove()
        })

        /*
            one() 其实和on()没啥区别，但是one()只能触发一次。就不演示了
        */ 

        // 其实像click(),mouseover(),mouseou(),blur()这类的jQuery都已经封装好了。直接传入回调函数作为参数即可。别忘了jQuery的链式调用的特点，我们可以通过链式调用绑定很多个事件
        $('ul li').click(function(){
            console.log('lililililil')
        }).mouseover(function(){
            console.log('overrrrr');
        })

        // off()可以把事件解绑，传入字符串形式的事件名称即可，如果不传参数就是直接把所有的事件都解绑
        $('ul li').off('mouseover')

        // 其实off()可以有第二个参数，就是函数名称，当函数是你提前写好的。就可以这么做
        function A(){
            console.log('AAAA');
        }

        function B(){
            console.log('BBBB');
        }

        $('span').click(A).click(B)
        $('span').off('click',A)
    </script>
</body>
</html>